<template>
  <div>
    <div>
      <van-nav-bar
        title="更改密码"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div style="width: 90%; margin-left: 5%">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="user_phone"
            label="用户名"
            placeholder="用户名"
            :rules="[
              { pattern: phoneyanz, required: true, message: '用户名错误' },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="user_pwd"
            label="新密码"
            placeholder="请输入密码"
            :rules="[
              {
                pattern: pwdyanzheng,
                required: true,
                message: '密码不小于6位',
              },
            ]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { createApp } from "vue";
import { NavBar } from "vant";
import { ref } from "vue";
import "vant/es/toast/style";
import { useStore } from "vuex";
import httpApi from "@/http";
import { showToast } from "vant";

const app = createApp();
app.use(NavBar);
const username = ref("");
const password = ref("");
const onSubmit = (values) => {
  if (store.state.user.user_phone == username.value) {
    let user_pwd = password.value;
    let user_id = store.state.user.user_id;
    httpApi.userApi.updatePwd({ user_id, user_pwd }).then((res) => {
      if (res.data.code == 200) {
        showToast("修改成功");
      }
    });
  } else {
    showToast("修改失败,请检查手机号");
  }
  username.value = "";
  password.value = "";
};

const onClickLeft = () => history.back();
const pwdyanzheng = /^.{6}/;
const phoneyanz = /^1[3-9]\d{9}$/;

const store = useStore();
</script>

<style lang="scss" scoped>
</style>